<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提取句子</title>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .box{
            width:80%;
            height:80px;
            border:1px #9b8a30 solid;
        }
    </style>
</head>
<body>
<center>
    <div class="box">
        <br>
        <!--<div class="progress">-->
            <!--<div class="progress-bar" id="pro" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width:20%;">-->
                <!--20%-->
            <!--</div>-->
            <span>{$number}/<span id="num">{$number}</span></span>
        <!--</div>-->
    </div>
    <input type="hidden" name="number" id="number" value="{$number}">
    <button class="btn btn-default dropdown-toggle" id="btn">开始</button>
</center>
</body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="/static/bootstrap/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
$("#btn").click(function(){
    var number = $("#number").val()-1;
    var intervalId = setInterval(function () {
        $("#btn").attr('disabled',true);
        var url = "{:url('/index/index/postSetInterVal')}";
        $.post(url,{number:number},function(data){
           console.log(data);
           if(data<0){
               clearInterval(intervalId);
               $("#num").html('执行完成');
           }else{
               $("#num").html(data);
               number = data-1;
           }
        });
    },5000);
});
</script>
</html>